<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">发送请求</button>
    <button id="btn2">关闭链接</button>
    <script>
        // 通过 websocket 完成前后端通信
        // 1. 创建ws实例，建立连接
        const ws = new WebSocket("wss://javascript.info/article/websocket/demo/hello")
        // 2.和服务器建立通信 ws.onopen 事件
        ws.onopen = () => {
            console.log("连接成功")
        }
        // 3.给服务器发请求 ws.send 方法
        document.querySelector('#btn').addEventListener('click', function() {
            ws.send('你好，websocket服务器')
        })
        //4。接收服务器发的消息 ws.onmessage
        ws.onmessage = function(event) {
            console.log(event.data)
        }
        //5．关闭连接 ws.close()
        document.querySelector('#btn2').addEventListener('click', () => {
            ws.close()
        })
        // 6．监听通信关闭 ws.onclose
        ws.onclose = () => {
            console.log('连接关闭')
        }
    </script>
</body>
</html>